<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-if="macAccounts.length === 0">
        <md-card class="add-card" ng-click="addMacAccount()">
            <md-card-content>
                <div layout="row" layout-align="center center">
                    <md-icon class="material-icons" style="font-size: 21px; height: 19px; min-height: 19px;">add</md-icon>
                </div>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="account in macAccounts track by $index">
        <md-card>
            <md-card-content>
                <div layout="row" layout-align="space-between center">
                    <div flex="100">{{ account.mac | mac }}</div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>